// 图片文件夹
<template>
  <div class="imgFile">
    <div v-for=" (item, index) in photoList " :key="index">
      <el-card :body-style="{ padding: '0px',cursor:'pointer' }">
        <div class="img-box" v-if="item.pictureSum" @click="upload(item,index)">
          <img :src="item.photo" class="image">
        </div>
        <div class="img-box origin" v-if="!item.pictureSum">
          <img src="@/public/image/add.png" v-if="item.photoId" @click="upload(item,index)">
          <p v-if="!item.photoId" style="line-height:278px">请输入图片夹名称</p>
        </div>
        <div class="text">
          <p class="imageCount">共有 :
            <span>{{item.pictureSum ? item.pictureSum : 0}}</span>张</p>
          <div class="bottom clearfix">
            <el-row :gutter="25">
              <el-col :span="16">
                <el-input placeholder="请输入图片夹名称" v-model="item.photoName" :ref="'input'+index" @blur="updatePictureList(item,index)"></el-input>
              </el-col>
              <el-col :span="8" class="handleBtns">
                <el-button type="text" class="button" @click="upload(item,index)" v-if="item.photoId">上传</el-button>
                <el-button type="text" class="button" @click.stop="deleatItemFn(item,index)">删除</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
    <div class="addFiles" :class="{noData:!photoList.length}">
      <span @click="addFile">
        <i class="el-icon-plus"></i>&nbsp;&nbsp;增加图片夹</span>
      <span class="ruleText">
        &nbsp;&nbsp;仅支持JPG、JPEG、BMP、PNG格式,文件小于10M<br/>&nbsp;&nbsp;(最多上传20张,最佳尺寸430*506px)
      </span>
    </div>
  </div>
</template>
<script>
import {getHotelPicByid,addupHotelPic,deleteHotelPictureListFn} from '@/public/js/saleHotel'
export default {
  data () {
    return {
      message: '',
      newFile: {
        photoName: ''
      }
    }
  },
  props:['id','getPicListFn','deleatItemFn','addupPicFn','photoList','routeUrl'],
  created () {
    //获取图片夹列表
    this.getPicListFn()
  },
  methods: {
    // 增加文件夹
    addFile () {
      for( let [ i, item ] of new Map(  this.photoList.map( ( item, i ) => [ i, item ] ) ) ) {
        if (!item.photoName) {
           this.$refs['input' + i][0].focus()
           return false
        }
      }
       this.photoList.push(this.newFile)
    },
    // 封面
    fm (item) {
     return item[0].filePath 
    },
    upload (item, index) {
      if (!item.photoName) {
        // 自动获取焦点
        this.$refs['input' + index][0].focus()
      } else {
         this.$router.push({path: this.routeUrl, query: {id: item.photoId}})
      }
    },
    //更新新增相册 
    updatePictureList(item,index) {
      if(!item.photoName) {
          this.$message({
              type: 'warning',
              message: '请输入相册名称!'
          });
          this.$refs['input'+index][0].focus()
          return false;
      }
      // 上传修改相册
      this.addupPicFn(item)
    }
  }
}
</script>
<style lang="scss">
.imgFile {
  .addFiles {
    box-sizing: border-box;
    padding-top: 180px;
    color: #45a2ff;
    height: 360px;
    &:hover {
      cursor: pointer;
    }
    & > span {
      float: left;
      &.ruleText {
        color: #96a6b6;
      }
    }
    &.noData{
      padding-top: 0;
    }
  }
  & > div {
    float: left;
    margin-right: 20px;
    margin-bottom: 15px;
    .el-card {
      border-radius: 8px;
      width: 300px;
      height: 360px;
      .img-box {
        height: 278px;
        border-radius: 10px;
        overflow: hidden;
        border-bottom: 1px dashed #e6ebf5;
        text-align: center;
        position: relative;
        &.origin {
          & > img {
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-35px;
            margin-top:-35px;
          }
        }
      }
      .text {
        padding: 0 15px;
        .imageCount {
          height: 28px;
          text-align: right;
          line-height: 28px;
          & > span {
            color: #ff5343;
          }
        }
        .handleBtns {
          text-align: right;
          padding-left: 0 !important;
        }
      }
    }
    .image {
      width: 100%;
      display: block;
    }
  }
}
</style>
